import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 800
    height: 600
    visible: true
    title: qsTr("Canvas 路径绘制 样式")

    Column {
        anchors.centerIn: parent
        anchors.margins: 40
        spacing: 5

        Row {
            spacing: 10

            Button {
                text: "清除画布"
                onClicked: {
                    canvas.clear()
                }
            }

            Button {
                text: "绘制路径"
                onClicked: {
                    canvas.requestPaint()
                }
            }

            Button {
                text: "切换样式"
                onClicked: {
                    canvas.currentStyle = (canvas.currentStyle + 1) % 3
                }
            }
        }

        Canvas {
            id: canvas
            width: parent.width
            height: 400

            property int currentStyle: 0  
            property var styles: [
                { fill: "#FF6B6B", stroke: "#C44D4D", lineWidth: 3 },
                { fill: "#4ECDC4", stroke: "#2A7F7A", lineWidth: 5 },
                { fill: "#FFE66D", stroke: "#C4B34A", lineWidth: 2 }
            ]


            onPaint: {
                var ctx = getContext("2d")
                ctx.clearRect(0, 0, width, height)

                var style = styles[currentStyle]

                drawPolygon(ctx, 100, 100, 60, 6, style)

                // drawStar(ctx, 300, 100, 5, 30, 60, style)
            }

            function drawPolygon(ctx, centerX, centerY, radius, sides, style) {
                ctx.save()
                ctx.beginPath()

                for(var i=0; i<sides; i++) {
                    var angle = (i / sides) * 2 * Math.PI - Math.PI / 2
                    var x = centerX + radius * Math.cos(angle)
                    var y = centerY + radius * Math.sin(angle)
                    if(i === 0) {
                        ctx.moveTo(x, y)
                    } else {
                        ctx.lineTo(x, y)
                    }
                }

                ctx.closePath()
                applyStyle(ctx, style)
                ctx.restore()
            }

            function applyStyle(ctx, style) {
                ctx.fillStyle = style.fill
                ctx.strokeStyle = style.stroke
                ctx.lineWidth = style.lineWidth
                ctx.fill()
                ctx.stroke()
            }

            function adjustAlpha(color, alpha) {
                return color.replace(/\)/, ", " + alpha + ")").replace(/rgb/, "rgba")
            }

            function clear() {
                var ctx = getContext("2d")
                ctx.clearRect(0, 0, width, height)
            }

        }

        Text {
            text: "当前样式: " + (canvas.currentStyle + 1) + "使用beginPath() + lineTo()绘制路径 | fillStyle: " +
                canvas.styles[canvas.currentStyle].fill + " | strokeStyle: " + canvas.styles[canvas.currentStyle].stroke
                color: "gray"
        }

    }
}
